<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + 	request.getServerPort() + request.getContextPath() + "/";
%>

<!DOCTYPE html>
<html>
<head>
	<base href="<%=basePath%>">
<meta charset="UTF-8">

<link href="jquery/bootstrap_3.3.0/css/bootstrap.min.css" type="text/css" rel="stylesheet" />
<link href="jquery/bootstrap-datetimepicker-master/css/bootstrap-datetimepicker.min.css" type="text/css" rel="stylesheet" />

<script type="text/javascript" src="jquery/jquery-1.11.1-min.js"></script>
<script type="text/javascript" src="jquery/bootstrap_3.3.0/js/bootstrap.min.js"></script>
<script type="text/javascript" src="jquery/bootstrap-datetimepicker-master/js/bootstrap-datetimepicker.js"></script>
<script type="text/javascript" src="jquery/bootstrap-datetimepicker-master/locale/bootstrap-datetimepicker.zh-CN.js"></script>
	<link rel="stylesheet" type="text/css" href="jquery/bs_pagination/jquery.bs_pagination.min.css">
	<script type="text/javascript" src="jquery/bs_pagination/jquery.bs_pagination.min.js"></script>
	<script type="text/javascript" src="jquery/bs_pagination/en.js"></script>

<script type="text/javascript">

	$(function(){

//来为创建按钮绑定事件，目的是打开添加操作的模态窗口
		$("#addBtn").click(function () {

			$(".time").datetimepicker({
				minView: "month",
				language:  'zh-CN',
				format: 'yyyy-mm-dd',
				autoclose: true,
				todayBtn: true,
				pickerPosition: "top-left"
			});
			alert("打开创建市场活动模态窗口")
			//alert("js成功")
			/*
			* 操作模态窗口的方式
			* 	需要操作模态窗口的jQuery对象，调用modal方法，为该方法传递参数，
			* 	show:打开模态窗口  hide:关闭模态窗口
			* */

			/*
			* 走后台，目的是获取用户信息列表，给所有者下拉列表赋值
			* */
			$.ajax({
				url:"/crm/activity/add",
				type:"get",
				dataType:"json",
				data:{

				},
				success:function (resp) {
					/*
					* resp
					* 	[{用户对象1},{用户对象2},...]
					*
					* */
					var html="<option></option>";
					//n代表遍历出来的没一个user对象
					$.each(resp,function (i,n) {
							html+="<option value='"+n.id+"'>"+n.name+"</o ption>"
					})

					$("#create-owner").html(html);

					//将当前登录的用户，设置为下拉框默认的选项
					//获取当前登录用户的id
					//在js中使用EL表达式必须要将其使用双引号括起来
					var id="${sessionScope.user.id}";

					$("#create-owner").val(id)

					//处理完下拉框之后再打开模态窗口
					$("#createActivityModal").modal("show");
				}
			})

		})


//为保存按钮绑定事件，执行添加操作
		$("#saveBtn").click(function () {
			alert($.trim($("#create-owner").val()))
			$.ajax({
				url:"/crm/activity/save",
				type:"post",
				dataType:"json",
				data:{
					owner:$.trim($("#create-owner").val()),
					name:$.trim($("#create-name").val()),
					startDate:$.trim($("#create-startDate").val()),
					endDate:$.trim($("#create-endDate").val()),
					cost:$.trim($("#create-cost").val()),
					description:$.trim($("#create-description").val())
				},
				success:function (resp) {
					if(resp.success){
						alert("市场活动添加成功")

						//pageList(1,2);

		/*
$("#activityPage").bs_pagination('getOption', 'currentPage')表示操作后停留在当前页
$("#activityPage").bs_pagination('getOption', 'rowsPerPage')表示操作后维持已经设置好的每页展现的记录数

		*/


				//做完操作之后，应该回到【第一页】，维持每页展现的记录数
					pageList(1,$("#activityPage").bs_pagination('getOption', 'rowsPerPage'));



						//局部刷新市场活动列表，以及关闭添加操作的模态窗口
						//清空添加操作模态窗口中的数据
					//获取表单的jQuery对象，但是表单的jQuery对象没有提供reset方法来重置表单
						//虽然jQuery对象没有提供reset方法，但是原生js提供了
						//所以我们需要将jQuery对象转为js的dom对象

						//jQuery对象转为dom对象  jQuery对象[下标]
						//dom对象转为jQuery对象 $(dom对象)
						$("#activityAddForm")[0].reset()
						$("#createActivityModal").modal("hide")
					}else {
						alert("市场活动添加失败")
					}
				}

			})
		})

//为修改按钮绑定事件，打开修改市场活动模态窗口
		$("#edit").click(function () {
			//alert("修改按钮")

			$(".time").datetimepicker({
				minView: "month",
				language:  'zh-CN',
				format: 'yyyy-mm-dd',
				autoclose: true,
				todayBtn: true,
				pickerPosition: "bottom-left"
			});

			var $xz=$("input[name=xz]:checked");
			if($xz.length==0){
				alert("请选择需要修改的市场活动")
			}else if ($xz.length>1){
				alert("每次最多只能修改一个市场活动")
			}else {

				//alert("可以开始进行修改操作了")
				 var id=$xz.val()
				$.ajax({
					url:"/crm/activity/edit.do",
					type:"get",
					data:{
						"id":id
					},
					dataType:"json",
					success:function (resp) {
	//resp {"userList":[{用户1},{用户2},{用户3}..],"activity":{市场活动}}
						var html="<option></option>";
					alert("回调函数执行")
						//alert(resp.activity.name)
						$.each(resp.userList,function (i,n) {
							html+="<option value='"+n.id+"'>"+n.name+"</option>"
						})

						$("#edit-owner").html(html)//铺垫所有者下拉框

						alert("所有者是"+resp.activity.owner)

						//处理单条activity
						$("#edit-id").val(resp.activity.id)
						$("#edit-owner").val(resp.activity.owner);
						$("#edit-name").val(resp.activity.name);
						$("#edit-startDate").val(resp.activity.startDate);
						$("#edit-endDate").val(resp.activity.endDate);
						$("#edit-cost").val(resp.activity.cost);
						$("#edit-description").val(resp.activity.description);


						//所有值都整理完毕之后，打开修改市场活动模态窗口
						$("#editActivityModal").modal("show");
					}

				})
			}

		})

//为更新按钮绑定事件，执行修改操作
		$("#updateBtn").click(function () {
			$.ajax({
				url:"/crm/activity/update.do",
				type:"post",
				data:{
					"id":$.trim($("#edit-id").val()),
					"name":$.trim($("#edit-name").val()),
					"owner":$.trim($("#edit-owner").val()),
					"startDate":$.trim($("#edit-startDate").val()),
					"endDate":$.trim($("#edit-endDate").val()),
					"cost":$.trim($("#edit-cost").val()),
					"description":$.trim($("#edit-description").val())
				},
				dataType:"json",
				success:function (resp) {
					if(resp){
						alert("修改市场活动成功")
						//pageList(1,2)
						/*
						* 修改市场活动之后，应该维持在当前页，并且维持每页展现的记录数
						* */
						pageList($("#activityPage").bs_pagination('getOption', 'currentPage')
								,$("#activityPage").bs_pagination('getOption', 'rowsPerPage'))

						$("#editActivityModal").modal("hide");

					}else {
						alert("修改市场活动失败")
					}
				}
			})
		})


//页面加载完毕执行pageList方法
		pageList(1,8)

//为查询按钮绑定单击事件，单击触发pageList方法
		$("#searchBtn").click(function () {
			/*
			* 每次点击查询按钮之前，我们应该将搜索框中的信息保存起来，存在隐藏域中
			*
			* */
			$("#hidden-name").val($.trim($("#search-name").val()))
			$("#hidden-owner").val($.trim($("#search-owner").val()))
			$("#hidden-startDate").val($.trim($("#search-startDate").val()))
			$("#hidden-endDate").val($.trim($("#search-endDate").val()))
			pageList(1,2);
		})

//为全选的复选框绑定事件，触发全选操作      【复选框】
		$("#qx").click(function () {
			//alert("可以")   this.checked表示全选的dom对象
			$("input[name=xz]").prop("checked",this.checked)
		})


		//以下这种做法是错误的，【因为动态生成的元素是不能够以普通绑定事件方式来绑定事件的】
		/*$("input[name=xz]").click(function () {
			alert(123)
		})*/

		/*
		动态生成的元素我们要以on方法的形式来触发事件
			语法:
				$(找到需要绑定事件的有效的外层元素).on(绑定事件的方式,需要绑定的元素的jQuery对象,回调函数)
		 */
		$("#activityBody").on("click",$("input[name=xz]"),function () {
			$("#qx").prop("checked",$("input[name=xz]").length==$("input[name=xz]:checked").length)
		})

//给删除按钮绑定事件，执行市场活动删除操作
		$("#deleteBtn").click(function () {
			//alert(213)
			var $xz=$("input[name=xz]:checked")
			if($xz.length==0){
				alert("请选择需要删除的市场活动纪录")
			}else {

				if(confirm("确定删除所选记录吗？")){
					//已将选择，有可能是一条，有可能是多条
					/*alert("可以执行删除操作了")*/
					var param="";

					//将$xz中的每一个DOM对象遍历出来,获取其value值,这样就相当于获取了id值。(我们根据id来删除)
					for (var i=0;i<$xz.length;i++){
						param+="id="+ $xz[i].value//dom对象获取value的方式。我们将jQuery对象转为了dom对象

						/*
                            也可以先将jQuery对象转为DOM对象,然后再转回到jQuery对象,使用val()来获取value值
                                $($xz[i]).val()
                         */
						//如果不是最后一个元素，需要在后面加&
						if(i<$xz.length-1){
							param+="&";
						}
					}
					alert(param)

					$.ajax({
						url:"/crm/activity/delete",
						type:"post",
						data:param,//id=67a9f250da8146f28ec2019a054f4fac
						dataType:"json",
						success:function (resp) {

							if(resp.success){
								alert("删除市场活动成功")
								pageList(1,2)
							}else {
								alert("删除市场活动失败")
							}

						}
					})
				}

			}
		})

	});

//页面加载完毕分割线-------------------------------------------------------------------------------------

	/*
	对于所以关系型数据库，做前端的分页相关操作的基础组件
	就是pageNo和pageSize
	pageNo:页码
	pageSize:每页展现的记录数量

	pageList方法:在页面加载完毕，自动发起一个ajax请求到后台获取数据，然后局部刷新市场
	活动信息列表

	我们在哪些情况下需要调用pageList方法
	1.点击左侧菜单市场活动菜单的时候
	2.添加，修改，删除后需要刷新市场活动列表
	3.点击查询按钮的时候
	4.点击下边的分页组件时候
	 */
	function pageList(pageNo,pageSize) {

		//将全选复选框的√干掉
		$("#qx").prop("checked",false)

		//每次在做查询之前，将隐藏域中的信息取出来，重新赋值给搜索框中
		$("#search-name").val($.trim($("#hidden-name").val()))
		$("#search-owner").val($.trim($("#hidden-owner").val()))
		$("#search-startDate").val($.trim($("#hidden-startDate").val()))
		$("#search-endDate").val($.trim($("#hidden-endDate").val()))

		$.ajax({
			url:"/crm/activity/pageList",
			type:"get",
			data:{
				"pageNo":pageNo,
				"pageSize":pageSize,
				"name":$.trim($("#search-name").val()),
				"owner":$.trim($("#search-owner").val()),
				"startDate":$.trim($("#search-startDate").val()),
				"endDate":$.trim($("#search-endDate").val())
			},
			dataType:"json",
			success:function (resp) {
				/*
				* 	resp
				* 我们需要:[{市场活动信息},{市场活动信息},...]
				*
				* 分页查询需要:{"total",100}
				*
				* 拼接就变成了:{"total",100,"datalist",[{市场活动信息},{市场活动信息},...]}
				* */

				var html="";
				$.each(resp.datalist,function (i,n) {

					html+='<tr class="active">';
					html+='<td><input type="checkbox" name="xz" value="'+n.id+'" /></td>';
					html+='<td><a style="text-decoration: none; cursor: pointer;" onclick="window.location.href=\'/crm/activity/detail.do?id='+n.id+'\';">'+n.name+'</a></td>';
					html+='<td>'+n.owner+'</td>';
					html+='<td>'+n.startDate+'</td>';
					html+='<td>'+n.endDate+'</td>';
					html+='</tr>';

				})
				$("#activityBody").html(html)

				//计算总页数
				var totalPages=resp.total%pageSize==0?resp.total:parseInt(resp.total/pageSize)+1;


				//处理完数据后，加入分页插件
				$("#activityPage").bs_pagination({
					currentPage: pageNo, // 页码
					rowsPerPage: pageSize, // 每页显示的记录条数
					maxRowsPerPage: 20, // 每页最多显示的记录条数
					totalPages: totalPages, // 总页数
					totalRows: resp.total, // 总记录条数

					visiblePageLinks: 3, // 显示几个卡片

					showGoToPage: true,
					showRowsPerPage: true,
					showRowsInfo: true,
					showRowsDefaultInfo: true,

					onChangePage : function(event, data){
						pageList(data.currentPage , data.rowsPerPage);
					}
				});

			}
		})


	}
</script>
</head>
<body>

	<input type="hidden" id="hidden-name">
	<input type="hidden" id="hidden-owner">
	<input type="hidden" id="hidden-startDate">
	<input type="hidden" id="hidden-endDate">
	<!-- 创建市场活动的模态窗口 -->
	<div class="modal fade" id="createActivityModal" role="dialog">
		<div class="modal-dialog" role="document" style="width: 85%;">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal">
						<span aria-hidden="true">×</span>
					</button>
					<h4 class="modal-title" id="myModalLabel1">创建市场活动</h4>
				</div>
				<div class="modal-body">
				
					<form id="activityAddForm" class="form-horizontal" role="form">
					
						<div class="form-group">
							<label for="create-marketActivityOwner" class="col-sm-2 control-label">所有者as<span style="font-size: 15px; color: red;">*</span></label>
							<div class="col-sm-10" style="width: 300px;">
								<select class="form-control" id="create-owner">

								</select>
							</div>
                            <label for="create-marketActivityName" class="col-sm-2 control-label">名称<span style="font-size: 15px; color: red;">*</span></label>
                            <div class="col-sm-10" style="width: 300px;">
                                <input type="text" class="form-control" id="create-name">
                            </div>
						</div>
						
						<div class="form-group">
							<label for="create-startTime" class="col-sm-2 control-label">开始日期</label>
							<div class="col-sm-10" style="width: 300px;">
								<input type="text" class="form-control time" id="create-startDate" readonly>
							</div>
							<label for="create-endTime" class="col-sm-2 control-label">结束日期</label>
							<div class="col-sm-10" style="width: 300px;">
								<input type="text" class="form-control time" id="create-endDate" readonly>
							</div>
						</div>
                        <div class="form-group">

                            <label for="create-cost" class="col-sm-2 control-label">成本</label>
                            <div class="col-sm-10" style="width: 300px;">
                                <input type="text" class="form-control" id="create-cost">
                            </div>
                        </div>
						<div class="form-group">
							<label for="create-describe" class="col-sm-2 control-label">描述</label>
							<div class="col-sm-10" style="width: 81%;">
								<textarea class="form-control" rows="3" id="create-description"></textarea>
							</div>
						</div>
						
					</form>
					
				</div>
				<div class="modal-footer">
					<!--
						data-dismiss 关闭模态窗口
					-->
					<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
					<button type="button" class="btn btn-primary" id="saveBtn">保存</button>
				</div>
			</div>
		</div>
	</div>
	
	<!-- 修改市场活动的模态窗口 -->
	<div class="modal fade" id="editActivityModal" role="dialog">
		<div class="modal-dialog" role="document" style="width: 85%;">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal">
						<span aria-hidden="true">×</span>
					</button>
					<h4 class="modal-title" id="myModalLabel2">修改市场活动</h4>
				</div>
				<div class="modal-body">
				
					<form class="form-horizontal" role="form">

						<input type="hidden" id="edit-id">
						<div class="form-group">
							<label for="edit-marketActivityOwner" class="col-sm-2 control-label">所有者<span style="font-size: 15px; color: red;">*</span></label>
							<div class="col-sm-10" style="width: 300px;">
								<select class="form-control" id="edit-owner" >

								</select>
							</div>
                            <label for="edit-marketActivityName" class="col-sm-2 control-label">名称<span style="font-size: 15px; color: red;">*</span></label>
                            <div class="col-sm-10" style="width: 300px;">
                                <input type="text" class="form-control" id="edit-name" >
                            </div>
						</div>

						<div class="form-group">
							<label for="edit-startTime" class="col-sm-2 control-label">开始日期</label>
							<div class="col-sm-10" style="width: 300px;">
								<input type="text" class="form-control time" id="edit-startDate" readonly>
							</div>
							<label for="edit-endTime" class="col-sm-2 control-label">结束日期(修改)</label>
							<div class="col-sm-10" style="width: 300px;">
								<input type="text" class="form-control time" id="edit-endDate" readonly>
							</div>
						</div>
						
						<div class="form-group">
							<label for="edit-cost" class="col-sm-2 control-label">成本</label>
							<div class="col-sm-10" style="width: 300px;">
								<input type="text" class="form-control" id="edit-cost" >
							</div>
						</div>
						
						<div class="form-group">
							<label for="edit-describe" class="col-sm-2 control-label">描述</label>
							<div class="col-sm-10" style="width: 81%;">
								<textarea class="form-control" rows="3" id="edit-description">整治牛马</textarea>
							</div>
						</div>
						
					</form>
					
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
					<button type="button" class="btn btn-primary" id="updateBtn">更新</button>
				</div>
			</div>
		</div>
	</div>
	
	
	
	
	<div>
		<div style="position: relative; left: 10px; top: -10px;">
			<div class="page-header">
				<h3>市场活动列表</h3>
			</div>
		</div>
	</div>
	<div style="position: relative; top: -20px; left: 0px; width: 100%; height: 100%;">
		<div style="width: 100%; position: absolute;top: 5px; left: 10px;">
		
			<div class="btn-toolbar" role="toolbar" style="height: 80px;">
				<form class="form-inline" role="form" style="position: relative;top: 8%; left: 5px;">
				  
				  <div class="form-group">
				    <div class="input-group">
				      <div class="input-group-addon">名称</div>
				      <input class="form-control" type="text" id="search-name">
				    </div>
				  </div>
				  
				  <div class="form-group">
				    <div class="input-group">
				      <div class="input-group-addon">所有者</div>
				      <input class="form-control" type="text" id="search-owner">
				    </div>
				  </div>


				  <div class="form-group">
				    <div class="input-group">
				      <div class="input-group-addon">开始日期</div>
					  <input class="form-control" type="text" id="search-startDate" />
				    </div>
				  </div>
				  <div class="form-group">
				    <div class="input-group">
				      <div class="input-group-addon">结束日期</div>
					  <input class="form-control" type="text" id="search-endDate">
				    </div>
				  </div>
				  
				  <button type="button" class="btn btn-default" id="searchBtn">查询</button>
				  
				</form>
			</div>
			<div class="btn-toolbar" role="toolbar" style="background-color: #F7F7F7; height: 50px; position: relative;top: 5px;">
				<div class="btn-group" style="position: relative; top: 18%;">
				  <button type="button" class="btn btn-primary" id="addBtn"><span class="glyphicon glyphicon-plus"></span> 创建</button>
				  <button type="button" class="btn btn-default" id="edit"><span class="glyphicon glyphicon-pencil"></span> 修改</button>
				  <button type="button" class="btn btn-danger" id="deleteBtn" ><span class="glyphicon glyphicon-minus" ></span> 删除sss</button>
				</div>
				
			</div>
			<div style="position: relative;top: 10px;">
				<table class="table table-hover">
					<thead>
						<tr style="color: #B3B3B3;">
							<td><input type="checkbox" id="qx" /></td>
							<td>名称6666</td>
                            <td>所有者</td>
							<td>开始日期</td>
							<td>结束日期</td>
						</tr>
					</thead>
					<tbody id="activityBody">
						<%--<tr class="active">
							<td><input type="checkbox" /></td>
							<td><a style="text-decoration: none; cursor: pointer;" onclick="window.location.href='workbench/activity/detail.jsp';">发传单</a></td>
                            <td>zhangsan</td>
							<td>2020-10-10</td>
							<td>2020-10-20</td>
						</tr>
                        <tr class="active">
                            <td><input type="checkbox" /></td>
                            <td><a style="text-decoration: none; cursor: pointer;" onclick="window.location.href='workbench/activity/detail.jsp';">发传单</a></td>
                            <td>zhangsan</td>
                            <td>2020-10-10</td>
                            <td>2020-10-20</td>--%>
                        </tr>
					</tbody>
				</table>
			</div>
			
			<div style="height: 50px; position: relative;top: 30px;">
				<div id="activityPage"></div>

			</div>
			
		</div>
		
	</div>
</body>
</html>